<template>
    <div>
        <nut-navbar class="header" title="购物车" @on-click-back="router.push({name:home})" icon="share" @on-click-send="send"></nut-navbar>
        <main>
            <div class="cart_null">
                <img src="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png" alt="">
                <p class="empty_txt">购物车空空如也，去逛逛吧~</p>
                <div class="ope flex">
                    <a href="http://m.dangdang.com/touch/?t=1640855325">逛一逛</a>
                    <a href="http://home.m.dangdang.com/wishlist.php?action=list_wishlist">我的收藏</a>
                </div>
            </div>
            <div class="rec-prds-new-wrapper mt3">
                <nut-divider>根据您的偏好猜您可能喜欢</nut-divider>

                 <!-- 商品列表 -->
                <div class="good_lists py1">
                    <ul class="flex">
                        <li>
                            <img src="https://img3x9.ddimg.cn/71/33/28992419-1_h_47.jpg" alt="">
                            <div class="product-name">蛤蟆先生去看心理医生（年销200万册！英国经典心理咨询入门书，知名心理学家李松蔚强烈推荐）</div>
                            <div class="product-price-wrap flex mxh">
                                <span>￥19.00</span>
                                <a>找相似</a>
                            </div>
                        </li>
                        <li>
                            <img src="https://img3x2.ddimg.cn/85/8/29325172-1_h_9.jpg" alt="">
                            <div class="product-name">如果历史是一群喵1-9全集（套装共9册）（当当专享限量喵咪拼图）</div>
                            <div class="product-price-wrap flex mxh">
                                <span>￥132.00</span>
                                <a>找相似</a>
                            </div>
                        </li>
                        <li>
                            <img src="https://img3x4.ddimg.cn/32/35/23579654-1_h_6.jpg" alt="">
                            <div class="product-name">三体：全三册 刘慈欣代表作，亚洲“雨果奖”获奖作品！</div>
                            <div class="product-price-wrap flex mxh">
                                <span>￥54.87</span>
                                <a>找相似</a>
                            </div>
                        </li>
                        <li>
                            <img src="https://img3x7.ddimg.cn/86/17/1612974317-1_h_99.jpg" alt="">
                            <div class="product-name">【良品铺子-猪肉脯100g】零食小吃特产肉干网红休闲食品小包装</div>
                            <div class="product-price-wrap flex mxh">
                                <span>￥29.9</span>
                                <a>找相似</a>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </main>
    </div>
</template>

<script>
import { defineComponent,ref,reactive,toRefs} from 'vue'
export default defineComponent({
    name: '',
    setup() {
        const data = reactive({

        })
        const refData = toRefs(data);
        return {
            ...refData,
        }

    }
});
</script>
<style lang='scss' scoped>
.header{
    height: 50px;position: fixed;box-sizing: border-box;top: 0;width: 100%;z-index:999;background-color: #fff;
}
main{
    margin: 50px 0 70px 0;overflow: hidden;background-color: #f2f2f2;
    .cart_null{
        text-align: center;
        img{width: 25%;height: auto;display: block;padding: 40px 0 0 0;margin: 0 auto;}
        .ope{
            width: 60vw;margin: 0 auto;
            a{
                width: 100px;
                height: 35px;
                line-height: 35px;
                border: 1px solid #777;
                border-radius: 6px;
                color: #777;
                font-size: 15px;
                text-align: center;
            }
        }
    }
    .rec-prds-new-wrapper{
        .title{
            position: relative;color: #323232;text-align: center;font-size: 15px;
        }
        .good_lists{
            ul{
                flex-wrap: wrap;
                li{
                    margin-bottom: 10px;width: 45vw;border-radius: 10px;overflow: hidden;background-color: #fff;
                    img{width: 100%;}
                    .product-name{padding: 0 9px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        color: #111;
                        font-size: 13px;
                        line-height: 16px;
                        max-height: 31px;
                        margin-top: 10px;
                    }
                    .product-price-wrap{
                        padding: 0 9px;align-items: center;
                        span{font-size: 18px;font-weight: bold;}
                        a{
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: flex;
                            -webkit-box-flex: 0;
                            -webkit-flex: 0 0 auto;
                            flex: 0 0 auto;
                            border: 1px solid #dcdcdc;
                            border-radius: 18px;
                            color: #999;
                            font-size: 10px;
                            height: 18px;
                            -webkit-box-align: start;
                            -webkit-align-items: flex-start;
                            align-items: flex-start;
                            -webkit-box-pack: center;
                            -webkit-justify-content: center;
                            justify-content: center;
                            padding: 0 7px;
                            line-height: 18px;
                        }
                    }
                }
            }
        }
    }
}
</style>